

<!--
  规范：写明组件名称
  分页组件
-->
<modal>

  <style scoped>
  :scope{}
  .modal-mask{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: .4;
  }
  .modal-container{
    position: fixed;
    left: 50%;
    box-shadow: 0 0 10px #666;
    background: #fff;
    border-radius: 5px;
  }
  .modal-container .header{
    height: 40px;
    border-bottom: 1px solid #ebebeb;
    position: relative;
  }
  .modal-container .header h3{
    text-align: center;
    line-height: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
  }
  .modal-container .header a{
    position: absolute;
    right: 15px;
    top: 13px;
    font-size: 14px;
    color: #ccc;
  }
  .modal-container .header a:hover{ border: none }
  .modal-container .content{
    text-align: center;
    padding: 20px;
    min-height: 60px;
  }
  .modal-container .btn-group{
    height: 50px;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 0;
  }
  .modal-container .btn-group button{
    width: 90px;
    margin: 0 15px;
  }
  </style>

  <!-- 弹窗主体 -->
  <div if="{open}"
    class="modal-container {animation: open}"
    style="
      width: {opts.w||360}px;
      height: {opts.h||200}px;
      z-index: {opts.z?Number(opts.z)+11:22};
      top: {opts.top||'30%'};
      margin-left: {opts.w?'-'+Number(opts.w/2):-180}px;
    ">
    <div class="header">
      <h3><yield from="title"/></h3>
      <a href="javascript:;" onclick={ev.close}>关闭</a>
    </div>
    <div class="content">
      <yield from="content"/>
    </div>
    <div class="button-group">
      <yield from="button"/>
      <button type="button" class="close" onclick={ev.close}>
        <yield from="close"/>
      </button>
    </div>
  </div>

  <!-- 遮罩层 -->
  <div if={open} onclick={ev.close}
    style="opacity: {opts.mask}; z-index: {opts.z||11}"
    class="modal-mask"></div>

  <script>

  /**
   * 规范：组件可传入参数需要在 script 头部注释说明
   * w=宽度
   * h=高度
   * z=遮罩层级
   * top=高度位置
   * mask=遮罩透明度
   */

  /**
   * 规范：使用tag来代替_this , self, that 此类名称
   * 理由：组件挂载后变为riot tag 对象，用tag更贴切
   *      也便于跟函数内可能用到的类似变量做区分
   */
  var tag = this;

  /**
   * 规范：在挂载前预设的变量
   */
  tag.open = false;

  /**
   * 规范：属于组件html内dom事件的函数放在 tag.ev
   * 每个函数上需要注释出用途
   */
  tag.ev = {

    // 关闭弹窗
    close: function(){
      tag.update({
        open: false
      });
    },

    // 打开弹窗
    open: function(){
      tag.open = true;
      // 窗口外点击也触发关闭
      document.addEventListener('keydown', function(e){
        if(e.keyCode == 27) tag.ev.close();
      }, {once: true});
      tag.update();
    }

  };

  </script>

</modal>
